<template>
  <div @click="$emit('toggle-show-lyric')" class="player">
    <ul ref="ul">
      <li
        v-for="(item, index) in lyrics"
        :key="index"
        :style="{ color: currentLyricsIndex == index ? 'red' : '' }"
      >
        {{ item.text }}
        <template v-if="!item.text"><br /></template>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["currentMusic", "currentLyricsIndex",'lyrics'],

  watch:{
    currentLyricsIndex(n){
      this.$refs.ul.style.marginTop = -(n * 15) + "px";
    }
  },
}  
</script>

<style scoped lang="less">
.player {
  margin-top: 30px;
  height: 60vh;
  overflow: hidden;
  ul {
    padding: 0 20px;
    margin-top: 200px;
    transition: all 1s;
    li {
      line-height: 30px;
      text-align: center;
      color: rgb(221, 218, 218);
      opacity: 0.9;
    }
  }
}
</style>